import styled from 'styled-components';

export const LoginWrapper = styled.div `
	z-index: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 56px;
	background: #f9f9f9;	
`;

export const LoginBox = styled.div `
	width: 400px;
	box-sizing: border-box;
	height: 500px;
  margin: 150px auto;
  padding: 50px 50px 30px;
	background: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,.1);
	border-radius: 4px;
`;

export const Header = styled.div`
  margin: 0 auto 50px;
  padding: 10px;
  color: #969696;
  font-weight: 700;
  font-size: 18px;
	height: 40px;
  .left {
  	padding: 10px;
		float: left;
		margin-left: 60px;
    color: #ea6f5a;
    border-bottom: 2px solid #ea6f5a;
  }

  .right {
  	padding: 10px;
  	margin-right: 60px;
		float: right;
  }

}
`;

export const Container = styled.div`
	width: 300px;
	height: 200px;
  margin-bottom: 30px;
  color: #333;


}
`;

export const Input = styled.input`
	display: block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 0;
	padding: 4px 12px 4px 35px;
	font-size: 14px;
	background-color: hsla(0,0%,71%,.1);
	border: 1px solid #c8c8c8;
	box-sizing: border-box;
	outline: none;

	&.name {
		border-radius: 4px 4px 0 0;
		border-bottom: none;
	}

	&.pwd {
		border-radius: 0 0 4px 4px;
	}	
`;

export const RememberMe = styled.div`
	width: 300px;
	height: 25px;
`;

export const Button = styled.div`
	display: block;
	width: 300px;
	height: 45px;
	line-height: 45px;
	text-align:center;
	margin-top: 20px;
	font-size: 18px;
	border: none;
	border-radius: 25px;
	color: #fff;
	background: #3194d0;
	cursor: pointer;
	outline: none;
	box-sizing: border-box;
`;

export const OtherAccount =  styled.div`
	width: 300px;
	margin-top: 50px;
	padding-top: 8px;
	border-top: 1px solid #c8c8c8;
	font-size: 10px;
	color: #c8c8c8;
	text-align: center;
`;